<script setup lang="ts">
function onClickLeft() {
    history.back()
}
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
//————————————————————————————————————————————播放视频
import cover from '../../assets/home/detail/videoView.png'
const show: Ref<boolean> = ref(false);
//显示遮罩层的方法
function showVideo() {
    show.value = true
    if (videoRef.value) {
        //继续自动播放 
        videoRef.value.play()
    }
}
const videoRef: Ref<any> = ref()
//关闭遮罩层
function stopClick() {
    show.value = false
    //暂停视频声音
    videoRef.value.pause()
}
//简介信息
import portrait from '../../assets/home/detail/zyh.png'
import classtime from '../../assets/home/detail/time.png'
import camera from '../../assets/home/detail/camera.png'
import collection from '../../assets/home/detail/collection.png'
import student from '../../assets/home/detail/student.png'
import { gettabList, getstudentList, getdetailcouresepicList, gethotCourseList } from '@/api/user'


const tabName = ref('')
interface iStudent {
    icon: string,
    name: string,
    commentTime: string,
    description: string,
}
interface iCourse {
    icon: string,
    title: string,
    lesson: number,
    description: string,
}
//获取学员信息
const studentInfo: Ref<Array<iStudent>> = ref([])
const courseInfo: Ref<Array<iCourse>> = ref([])
//_________________________________绑定路由事件
import { useRoute } from 'vue-router';
const route = useRoute()
const courseId = route.params.id;  // 获取课程 ID
interface iCd {
    courseteacher: string,
    courseTitle: string,
    courseDes: string,

    coursePoint: string,
    stucount: number,
    id: number
}
const courseDetail: Ref<Array<iCd>> = ref([]);

onMounted(() => {
    // 从localStorage加载收藏列表
    const storedCollectList = JSON.parse(localStorage.getItem('collectList') || '[]');
    collectList.value = storedCollectList;

    gethotCourseList({ id: courseId }).then(res => {
        // 遍历所有课程，找到与当前课程 ID 匹配的课程
        const course = res.data.hotCourseList.find(item => item.id === Number(courseId));
        console.log(89, course.id);//存数组里的第几条数据

        if (course) {
            // 设置课程详情
            courseDetail.value = course;

        } else {
            // 如果没有找到课程
            console.log('课程未找到');
        }
    }).catch(error => {
        // 错误处理
        console.log('获取课程详情失败:', error);
    });

    gettabList({}).then(res => {
        // console.log(5, res.data);
        tabName.value = res.data.tabList
    })
    getstudentList({}).then(res => {
        // console.log(7, res.data.studentList);
        studentInfo.value = res.data.studentList
    })
    getdetailcouresepicList({}).then(res => {
        console.log(8, res.data.detailcouresepicList);
        courseInfo.value = res.data.detailcouresepicList
    })
})

const active = ref(0)

import pic1 from '../../assets/home/detail/pic1.png'
import pic2 from '../../assets/home/detail/pic2.png'
import pic3 from '../../assets/home/detail/pic3.png'
import pic4 from '../../assets/home/detail/pic4.png'
const studentPic: Ref<string[]> = ref([pic1, pic2, pic3, pic4])
//评论
import eye from '@/assets/home/detail/eye.png'
import comment from '@/assets/home/detail//comment.png'
import thumbsup from '@/assets/home/detail/thumbsup.png'
import { showToast } from 'vant';
//收藏
const iconRef = ref()
// 初始状态是 'star-o'，表示空心星星
const iconName = ref('star-o');
const collectList: Ref<Array<string>> = ref([])
function changeCollection() {
    // 先获取当前课程的ID
    const courseId = courseDetail.value.id;
    // 判断当前课程是否已经在收藏列表中
    const index = collectList.value.findIndex(item => item.id === courseId);
    if (index === -1) {
        // 如果不在收藏列表中，添加到收藏列表
        iconName.value = 'star'; // 切换图标为已收藏
        showToast('已收藏')
        collectList.value.push(courseDetail.value);
    } else {
        // 如果已经在收藏列表中，移除它
        iconName.value = 'star-o'; // 切换图标为未收藏
        showToast('取消收藏')
        collectList.value.splice(index, 1);
    }

    // 更新 localStorage 中的收藏列表
    localStorage.setItem('collectList', JSON.stringify(collectList.value));
}
//去评论
const message = ref('')//评论内容
import send from '@/assets/home/detail/send.png'
const show1: Ref<Boolean> = ref(false);
function showBottom() {
    show1.value = true;
}
function gotoCommentClick() {
    showBottom()
}
//提交评论
const commentList: Ref<Array<string>> = ref([])
import { getComment } from '@/api/user'
function sendCommentClick() {
    console.log(message.value);
    const contentMessage=message.value
    localStorage.setItem('sendCommentClick', contentMessage)
    getComment({content:contentMessage}).then(res => {
        console.log(222,res);
        
        if(res.code==200){
            showToast(res.message)
            commentList.value.push(contentMessage)
        }
       
    }
    )
     // 更新 localStorage 中的收藏列表
     localStorage.setItem('sendCommentClick', JSON.stringify(commentList.value));
}
</script>
<template>

    <!-- 课程详情简介 -->
    <div class="coursedetail content">
        <header>
            <van-nav-bar left-text="返回" title="课程详情" left-arrow @click-left="onClickLeft"
                @click-right="changeCollection">
                <template #right>
                    <van-icon ref="iconRef" :name="iconName" size="18" />

                </template>
            </van-nav-bar>

        </header>
        <main>

            <div class="boximage">
                <img :src="cover" alt="" class="cover" />
                <div @click="showVideo" class="video-btn">
                    <van-icon size="16" name="play" color="#fff" />
                </div>
            </div>


            <!-- 弹出播放视频的组件 -->
            <van-overlay :show="show" @click="stopClick">
                <div class="wrapper" @click.stop>
                    <video ref="videoRef" autoplay controls class="my-video"
                        src="https://vod.300hu.com/vod/product/90f8f9da-08dc-43c8-8205-bbdb60cb9fad/1091_c7db5e75f_f.mp4?source=1&h265=1092h_e1c47f736_f.mp4"></video>
                </div>
            </van-overlay>

            <!-- 简介信息-->
            <div class="abstractInfo" v-if="courseDetail">
                <div class="teacher_info">
                    <van-image :src="portrait" round width="0.3rem" height="0.3rem"></van-image>
                    <span>{{ courseDetail.courseteacher }}</span>
                </div>
                <p style="font-size: 0.16rem;margin: 10px 0;">{{ courseDetail.courseTitle }}</p>
                <p class="classdata">
                <div class="column1">
                    <van-image :src="classtime"></van-image>
                    <span>1.5小时</span>
                    <van-image :src="camera"></van-image>
                    <span>12课时</span>
                </div>

                <div class="column1">
                    <van-image :src="collection"></van-image>
                    <span>4.8(753)</span>
                    <van-image :src="student"></van-image>
                    <span>2K学员</span>
                </div>


                </p>
                <p style="margin: 10px 0;font-size: 0.14rem;">{{ courseDetail.courseDes }}</p>
                <!-- tabs -->
                <van-tabs v-model:active="active" animated class="tabs">
                    <!--  <van-tab v-for="index in tabName" :title="index.tab" @click-tab="changePage(index.tab)">
                        <van-cell :title="index.tab" value="查看更多">
                        </van-cell>
                      
                    </van-tab> -->
                    <van-tab title="简介" class="tabs_abstract">

                        <van-cell title="简介" value="查看更多" />
                        <p style="margin: 10px 0;font-size: 0.14rem;">
                            {{ courseDetail.coursePoint }}
                        </p>
                        <van-cell title="课程评价" value="查看更多" />
                        <!-- 卡片 -->
                        <div class="card">
                            <div class="card1 mr">
                                <p class="mb">⭐ 4.8</p>
                                <p>评分</p>
                            </div>
                            <div class="card1">
                                <p class="mb">⭐ {{ courseDetail.stucount }}</p>
                                <p>学员</p>
                            </div>
                        </div>
                        <!-- 学员评论 -->
                        <div class="student_comment">
                            <div class="student_card" v-for="item in studentInfo" :key="item.name">
                                <div class="left">
                                    <van-image :src="item.icon" round width="40" height="40"></van-image>
                                </div>
                                <div class="right">
                                    <p class="studentname class14">{{ item.name }}</p>
                                    <p class="commenttime" style="color: #ccc;">{{ item.commentTime }}</p>
                                    <p class="comment class14">{{ item.description }}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 学员作业 -->
                        <div class="studentWork">
                            <van-cell title="学员作业" value="查看更多" />
                            <!-- 作业宫格图片 -->
                            <div class="studentPic">
                                <van-image :src="value" v-for="value in studentPic" :key="value"></van-image>
                            </div>
                            <van-button block @click="$router.push('/home/addwork')">添加作业</van-button>
                        </div>
                        <!-- 评论 -->
                        <van-cell title="评论" value="我要评论" @click="gotoCommentClick" />
                        <div class="student_comment">
                            <div class="student_card" v-for="item in studentInfo" :key="item.name">
                                <div class="left">
                                    <van-image :src="item.icon" round width="40" height="40"></van-image>
                                </div>
                                <div class="right">
                                    <p class="studentname class14">{{ item.name }}</p>
                                    <p class="commenttime" style="color: #ccc;">{{ item.commentTime }}</p>
                                    <p class="comment class14">{{ item.description }}</p>
                                    <p class="comment_row">
                                        <van-image :src="eye"></van-image>
                                        <span>299</span>
                                        <van-image :src="comment"></van-image>
                                        <span>17</span>
                                        <van-image :src="thumbsup"></van-image>
                                        <span>29</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- 提交评论的地方 -->
                        <van-cell-group inset>
                            <van-popup v-model:show="show1" position="bottom" :style="{ height: '120px' }"
                                :closeable="true">
                                <template #default>
                                    <div style="position: relative;">
                                        <van-field v-model="message" rows="2" autosize label="评论" type="textarea"
                                            maxlength="50" placeholder="请输入评论内容" show-word-limit
                                            style="height: 120px;width: 100vw;" @keyup.enter="sendCommentClick" />
                                        <van-image :src=send style="position: absolute; top: 40px;left:20px;"
                                            @click="sendCommentClick"></van-image>
                                    </div>


                                </template>
                            </van-popup>
                        </van-cell-group>
                    </van-tab>

                    <van-tab title="课程" class="tabs_course">
                        <van-cell title="课程" />

                        <!-- 卡片 -->
                        <div class="course_card" v-for="item in courseInfo">
                            <div class="top" :key="item.description">
                                <div class="left">
                                    <van-image :src="item.icon"></van-image>
                                </div>
                                <div class="right">
                                    <p class="class14">{{ item.title }}</p>
                                    <p> {{ item.lesson }}</p>
                                </div>
                            </div>
                            <div class="bottom">
                                {{ item.description }}
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </main>
    </div>

</template>

<style lang="scss" scoped>
html,
body {
    position: relative;

}

.content {
    height: 100vh;
    width: 100vw
}

.coursedetail {
    display: flex;
    flex-direction: column;
}


main {
    flex: 1;
    overflow: auto;
}

.boximage {
    position: relative;
}

.cover {
    width: 100%;
    height: 100%;
}

.video-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.4);
    user-select: none;

    .van-icon {
        display: flex;
        justify-content: center;
        align-items: center;

    }
}

.my-video {
    position: fixed;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

//简介信息
.abstractInfo {

    padding: 10px;

    .teacher_info {
        display: flex;
        align-items: center;

        .van-image {
            margin-right: 10px;
        }
    }

    .classdata {
        .van-image {
            width: 0.16rem;
            height: 0.16rem;
            margin-right: 0.1rem;
        }

        span {
            margin-right: 1rem;
        }

        .column1 {
            display: flex;
            align-items: center;
            margin-bottom: 0.08rem;
            justify-content: flex-start;
        }
    }

    .tabs {

        // 简介
        .tabs_abstract {

            //卡片
            .card {
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;

                .card1 {
                    // flex: 1;
                    width: 48%;
                    background-color: #FFF1F3;

                    height: 80px;
                    color: #000;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    font-size: 0.14rem;

                    .mb {
                        margin-bottom: .1rem;
                    }

                    .mr {
                        margin-right: 20px;
                    }
                }
            }

            .studentWork {
                display: flex;
                flex-direction: column;

                .studentPic {
                    width: 100vw;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;

                    .van-image {
                        width: 46vw;
                        margin-right: 10px;
                        margin-bottom: 10px;
                    }
                }
            }

            // 学员评论
            .student_comment {
                margin-top: 20px;

                .student_card {
                    display: flex;
                    margin-bottom: 14px;

                    .right {
                        flex: 1;
                        margin-left: 10px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }
                }


            }

        }

        //课程
        .tabs_course {
            .course_card {
                display: flex;
                flex-direction: column;
                margin-bottom: 20px;

                .top {
                    display: flex;
                    height: 80px;
                    margin-bottom: 14px;

                    .left {
                        width: 33vw;
                        height: 80px;

                        .van-image {

                            width: 100%;
                            height: 100%;

                        }
                    }

                    .right {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;
                        padding-left: 10px;
                        box-sizing: border-box;
                    }
                }

            }
        }
    }
}

.class14 {
    font-size: 0.14rem;
}

.comment_row {
    display: flex;
    margin-top: 10px;

    // .van-image{
    //     width: 12px;
    //     height: 12px;
    // }
    span {
        margin-left: 10px;
        margin-right: 10px;
    }
}
</style>